<template>
	<div>
		<!-- 头部 -->
		<div class="head">
			<van-row>
				<van-col @click="$router.back()" span="4">
					<van-icon name="arrow-left" />
				</van-col>
				<van-col span="10" offset="6">购物车</van-col>
			</van-row>
		</div>
		<!-- 主体 -->
		<!-- 第一个 -->
		<div class="weui-content">
			<div class="weui-t">
				<van-row>
					<van-col span="9">
						<div class="weui-panel">江苏蓝之蓝旗舰店</div>
					</van-col>
					<van-col offset="10">
						<van-cell popup-close-icon-z-index="8" is-link @click="showPopup">
							<van-icon name="delete-o" />
						</van-cell>
						<van-popup v-model="show">
							<p>确认删除？</p>
							<!-- <p>您确定要把此商品从购物车删除吗</p> -->
						</van-popup>
					</van-col>
				</van-row>
				<div class="content">
					<div class="con-let">
						<van-checkbox-group v-model="result" ref="checkboxGroup">
							<van-checkbox name="a">
								<img
									@click="add"
									class="img1"
									src="../assets/shan-1.jpg"
									alt=""
								/>
							</van-checkbox>
						</van-checkbox-group>
					</div>
					<div class="con-right">
						<p>
							蓝之蓝蓝色瓶装经典Q7浓香型白酒500ml52度高端纯粮食酒2瓶装包邮
							<br />
							规格：红色23
						</p>
						<div class="clear">
							<p>¥296.00</p>
							<van-stepper button-size="22px" v-model="value" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 第二个 -->
		<div class="weui-content">
			<div class="weui-t">
				<van-row>
					<van-col span="9">
						<div class="weui-panel">江苏蓝之蓝旗舰店</div>
					</van-col>
					<van-col offset="10">
						<van-cell popup-close-icon-z-index="8" is-link @click="showPopup">
							<van-icon name="delete-o" />
						</van-cell>
						<van-popup v-model="show">
							<p>确认删除？</p>
							<!-- <p>您确定要把此商品从购物车删除吗</p> -->
						</van-popup>
					</van-col>
				</van-row>
				<div class="content">
					<div class="con-let">
						<van-checkbox-group v-model="result" ref="checkboxGroup">
							<van-checkbox name="b">
								<img
									@click="add"
									class="img1"
									src="../assets/shan-1.jpg"
									alt=""
								/>
							</van-checkbox>
						</van-checkbox-group>
					</div>
					<div class="con-right">
						<p>
							蓝之蓝蓝色瓶装经典Q7浓香型白酒500ml52度高端纯粮食酒2瓶装包邮
							<br />
							规格：红色23
						</p>
						<div class="clear">
							<p>¥296.00</p>
							<van-stepper button-size="22px" v-model="value" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 第三个 -->
		<div class="weui-content">
			<div class="weui-t">
				<van-row>
					<van-col span="9">
						<div class="weui-panel">江苏蓝之蓝旗舰店</div>
					</van-col>
					<van-col offset="10">
						<van-cell popup-close-icon-z-index="8" is-link @click="showPopup">
							<van-icon name="delete-o" />
						</van-cell>
						<van-popup v-model="show">
							<p>确认删除？</p>
							<!-- <p>您确定要把此商品从购物车删除吗</p> -->
						</van-popup>
					</van-col>
				</van-row>
				<div class="content">
					<div class="con-let">
						<van-checkbox-group v-model="result" ref="checkboxGroup">
							<van-checkbox name="c">
								<img class="img1" src="../assets/shan-1.jpg" alt="" />
							</van-checkbox>
						</van-checkbox-group>
					</div>
					<div class="con-right">
						<p>
							蓝之蓝蓝色瓶装经典Q7浓香型白酒500ml52度高端纯粮食酒2瓶装包邮
							<br />
							规格：红色23
						</p>
						<div class="clear">
							<p>¥296.00</p>
							<van-stepper button-size="22px" v-model="value" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 第四个 -->
		<div class="weui-content">
			<div class="weui-t">
				<van-row>
					<van-col span="9">
						<div class="weui-panel">江苏蓝之蓝旗舰店</div>
					</van-col>
					<van-col offset="10">
						<van-cell popup-close-icon-z-index="8" is-link @click="showPopup">
							<van-icon name="delete-o" />
						</van-cell>
						<van-popup v-model="show">
							<p>确认删除？</p>
							<!-- <p>您确定要把此商品从购物车删除吗</p> -->
						</van-popup>
					</van-col>
				</van-row>
				<div class="content">
					<div class="con-let">
						<van-checkbox-group v-model="result" ref="checkboxGroup">
							<van-checkbox name="d">
								<img class="img1" src="../assets/shan-1.jpg" alt="" />
							</van-checkbox>
						</van-checkbox-group>
					</div>
					<div class="con-right">
						<p>
							蓝之蓝蓝色瓶装经典Q7浓香型白酒500ml52度高端纯粮食酒2瓶装包邮
							<br />
							规格：红色23
						</p>
						<div class="clear">
							<p>¥22222.00</p>
							<van-stepper button-size="22px" v-model="value" />
						</div>
					</div>
				</div>
			</div>
			<van-submit-bar
				:price="2222200"
				button-text="提交订单"
				@submit="onSubmit"
			>
				<van-checkbox name="a"> 全选</van-checkbox>
				<template #tip>
					你的收货地址不支持同城送,
					<span>修改地址</span>
				</template>
			</van-submit-bar>
		</div>
		<router-view></router-view>
	</div>
</template>
<style scoped lang="scss">
.head {
	width: 100%;
	height: 44px;
	line-height: 44px;
	font-size: 1.2rem;
	background: rgb(233, 228, 228);
}
.weui-content {
	width: 100%;
	// background: yellow;
	border-bottom: 1px rgb(212, 205, 205) solid;
	.weui-t {
		width: 96%;
		margin: 0 auto;
	}
	.weui-panel {
		width: 96%;
		line-height: 40px;
		color: grey;
		font-size: 0.8rem;
	}
}
.tan {
	// width: 30%;
	margin-top: -50px;
}

.van-cell {
	font-size: 1.3rem;
}
.img1 {
	width: 5rem;
	height: 5rem;
}
.content {
	// background: palegoldenrod;
	display: flex;
	justify-content: space-between;
}
.con-right {
	// background: pink;
	font-size: 0.7rem;
	margin-top: -10px;
}
.clear {
	color: red;
	// background: rgb(109, 88, 91);
	display: flex;
	justify-content: space-between;
}
.flex {
	background: pink;
}
</style>
<script>
export default {
	data() {
		return {
			show: false,
			result: [],
			value: 1,
		}
	},

	methods: {
		showPopup() {
			this.show = true
		},
		onSubmit() {
			this.$router.push('/pay')
		},
		add() {
			console.log(1)
			this.$router.push('/detail')
			console.log(this.$router)
		},
		checkAll() {
			this.$refs.checkboxGroup.toggleAll(true)
		},
	},
}
</script>